<div style="min-height:calc(100vh -  157px)">
  <form  nz-form [formGroup]="validateForm">
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="staffNo">工号</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <input type="text" nz-input formControlName="staffNo" [(ngModel)]="staffInitInfo.staffNo" placeholder="请输入工号">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4">用户名</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <span>{{staffInitInfo.loginId}}</span>
        <button nz-button  [nzType]="'primary'" (click)="showModal(staffInitInfo.loginId)">修改</button>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="fullName">姓名</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <input type="text" nz-input formControlName="fullName" [(ngModel)]="staffInitInfo.name" placeholder="请输入姓名">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label  [nzSpan]="4">性别</nz-form-label>
      <nz-form-control [nzSpan]="8" >
        <nz-radio-group formControlName="sex" [(ngModel)]="staffInitInfo.sex">
          <label nz-radio nzValue="1">男</label>
          <label nz-radio nzValue="0">女</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label  [nzSpan]="4">部门</nz-form-label>
      <nz-form-control [nzSpan]="8" >
        <nz-tree
          [nzData]="nodes"
          nzCheckable
          nzMultiple
          [nzCheckStrictly]="true"
          [nzCheckedKeys]="isSelectDepartmentsId"
          (nzCheckBoxChange)="nzEvent($event)">
        </nz-tree>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="phone">手机号</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <input type="text" nz-input formControlName="phone" [(ngModel)]="staffInitInfo.phone" placeholder="请输入手机号码">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="entryDate">入职时间</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <nz-date-picker
          nzShowTime
          nzFormat="yyyy-MM-dd"
          nzPlaceHolder="选择入职时间"
          formControlName="entryDate"
          [(ngModel)]="staffInitInfo.entryDate"
        ></nz-date-picker>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzFor="staffType">员工类型</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <nz-select style="width: 120px;" formControlName="staffType" [(ngModel)]="staffInitInfo.staffType" nzAllowClear nzPlaceHolder="请选择员工类型">
          <nz-option *ngFor="let info of staffTypes" [nzValue]="info.id" [nzLabel]="info.name"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzFor="identityCard">身份证号</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <input type="text" nz-input formControlName="identityCard" [(ngModel)]="staffInitInfo.identityCard"  placeholder="请输入身份证号">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzFor="birthday">出生日期</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <nz-date-picker
          nzShowTime
          nzFormat="yyyy-MM-dd"
          nzPlaceHolder="选择出生日期"
          [formControlName]="'birthday'"
          [(ngModel)]="staffInitInfo.birthday"
        ></nz-date-picker>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzFor="address">居住地</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <input type="text" nz-input formControlName="address" [(ngModel)]="staffInitInfo.address" placeholder="请输入居住地">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzFor="phone">证件照</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <nz-upload
          nzAction="uploadFileUrl"
          nzListType="picture-card"
          [(nzFileList)]="fileList"
          [nzShowButton]="fileList.length < 3"
          [nzShowUploadList]="showUploadList"
          [nzPreview]="handlePreview">
          <i nz-icon type="plus"></i>
          <div class="ant-upload-text">上传</div>
        </nz-upload>
        <nz-modal [nzVisible]="previewVisible" [nzContent]="iconCardModal" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
          <ng-template #iconCardModal>
            <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
          </ng-template>
        </nz-modal>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzFor="phone">头像</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <nz-upload
          nzAction="https://jsonplaceholder.typicode.com/posts/"
          nzListType="picture-card"
          [(nzFileList)]="fileList"
          [nzShowButton]="fileList.length < 3"
          [nzShowUploadList]="showUploadList"
          [nzPreview]="handlePreview">
          <i nz-icon type="plus"></i>
          <div class="ant-upload-text">上传</div>
        </nz-upload>
        <nz-modal [nzVisible]="previewVisible" [nzContent]="iconPhotoModal" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
          <ng-template #iconPhotoModal>
            <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
          </ng-template>
        </nz-modal>
      </nz-form-control>
    </nz-form-item>

    <div nz-row>
      <div nz-col [nzSpan]="24" style="text-align: center;">
        <button nz-button [nzType]="'primary'" (click)="saveEdit(staffInitInfo)">保存</button>
        <button nz-button  style="margin-left: 10px;" (click)="goBack()">取消</button>
      </div>
    </div>
  </form>
</div>

<!--修改模态框-->
<nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
  <ng-template #modalTitle>用户信息</ng-template>
  <ng-template #modalContent>
    <form nz-form>
      <nz-form-item>
        <nz-form-label [nzSpan]="5" nzRequired>账号</nz-form-label>
        <nz-form-control [nzSpan]="12">
          <input nz-input name="loginId" [(ngModel)]="roleDetail.loginId">
          <!--<nz-form-explain>Should be combination of numbers & alphabets</nz-form-explain>-->
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">角色</nz-form-label>
        <nz-form-control [nzSpan]="12">
          <nz-select name="onlineId" style="width: 236px" [(ngModel)]="roleId">
            <nz-option nzLabel="--请选择--" nzValue=""></nz-option>
            <nz-option *ngFor="let item of roleLists" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
          </nz-select>
          <a (click)="addRole(roleId)">添加</a>
          <!--<nz-form-explain>Should be combination of numbers & alphabets</nz-form-explain>-->
        </nz-form-control>
      </nz-form-item>
    </form>
    <div style="margin-top:20px;"></div>
    <div nz-row style="background-color: #fff;margin-top: 20px;padding:20px;">
      <nz-table #basicTable1 [nzData]="roleDetail.roles" [nzNoResult]="false">
        <thead>
        <tr>
          <th style="text-align:center">默认</th>
          <th style="text-align:center">角色</th>
          <th style="text-align:center">排序</th>
          <th style="text-align:center">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of basicTable1.data;let i = index;">
          <td style="text-align:center"><input type="checkbox" [(ngModel)]="item.isDefault"></td>
          <td style="text-align:center">{{item.name}}</td>
          <td style="text-align:center"><input type="number" [(ngModel)]="item.sort"></td>
          <td style="text-align:center">
            <a (click)="rDel(item.id)">删除</a>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
    <form>
      <nz-form-item>
        <nz-form-label [nzSpan]="5">备注</nz-form-label>
        <nz-form-control [nzSpan]="12">
          <textarea name="remark" style="width: 300px;height: 160px;" [(ngModel)]="roleDetail.remark"></textarea>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-template>
  <ng-template #modalFooter>
    <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">保存</button>
    <button nz-button nzType="default" (click)="handleCancel()">取消</button>
  </ng-template>
</nz-modal>
